<template>
  <div class="user-manage">
    <div class="content">
      <BasicTable @register="registerTable">
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                label: '编辑',
                onClick: handleEdit.bind(null, record),
                color: 'success',
              },
            ]"
          />
        </template>
      </BasicTable>
    </div>
    <FirstModal @register="registerModal" @success="handleSuccess" />
    <SecondModal @register="registerModal2" @success="handleSuccess" />
    <ThirdModal @register="registerModal3" @success="handleSuccess" />
    <ForthModal @register="registerModal4" @success="handleSuccess" />
  </div>
</template>

<script lang="ts">
  import { BasicTable, TableAction, useTable } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { defineComponent } from 'vue';
  import { columns } from './aboutUs.data';
  import FirstModal from './firstModal.vue';
  import SecondModal from './secondModal.vue';
  import ThirdModal from './thirdModal.vue';
  import ForthModal from './forthModal.vue';
  import { ListApi } from '../../api/aboutUs/AboutUsService';

  export default defineComponent({
    components: {
      BasicTable,
      TableAction,
      FirstModal,
      SecondModal,
      ThirdModal,
      ForthModal,
    },
    setup() {
      // 新增或编辑对话框
      const [registerModal, { openModal }] = useModal();
      const [registerModal2, { openModal: openModal2 }] = useModal();
      const [registerModal3, { openModal: openModal3 }] = useModal();
      const [registerModal4, { openModal: openModal4 }] = useModal();

      const [registerTable, { reload }] = useTable({
        api: ListApi,
        useSearchForm: false,
        columns: columns,
        rowKey: 'id',
        clickToRowSelect: false,
        pagination: false,
        fetchSetting: {
          listField: 'data',
        },
      });
      // 编辑
      const handleEdit = (record) => {
        // 获取编辑行的数据
        if (record.id === 1) {
          openModal(true, {
            record: JSON.parse(JSON.stringify(record)),
          });
        } else if (record.id === 2) {
          openModal2(true, {
            record: JSON.parse(JSON.stringify(record)),
          });
        } else if (record.id === 3) {
          openModal3(true, {
            record: JSON.parse(JSON.stringify(record)),
          });
        } else {
          openModal4(true, {
            record: JSON.parse(JSON.stringify(record)),
          });
        }
      };

      // 新增成功
      const handleSuccess = () => {
        reload();
      };
      return {
        registerTable,
        registerModal,
        handleEdit,
        handleSuccess,
        registerModal2,
        registerModal3,
        registerModal4,
      };
    },
  });
</script>

<style scoped lang="less">
  .user-manage {
    height: calc(100% - 16px);
    .content {
      padding: 16px;
      height: calc(100% - 133.78px);
    }
  }
</style>
